<template>
	<div class="uploadlist">
        <div class="upload-image">
            <!-- <input type="file" class="fileIndex" multiple @change="handleFileChange" accept="image/*" /> -->
            <input type="file" class="fileIndex" @change="handleFileChange" accept="image/*" />
            <div class="uploadBoxinfo">
                点击上传
            </div>
        </div>
	</div>
  
</template>

<script>
import {updatamodelcase} from '../../api/paperinfo/paperinfo.js'
import draggable from 'vuedraggable';
export default {
  name: 'UploadImage',
  props: {
	modudellist:{
		type: Array,
		default: () => []
	},
	examNoLength:{
		type: Number,
		default: () => ''
	},
	answerCardPages:{
		type: Number,
		default: () => ''
	},
    page:{
        type: Number,
		default: () => ''
    }
  },
  data() {
    return {
      imageUrl: '',
	  imgarray:[],
	  uploadimagearry:[],
	  viewerVisible: false, // 控制查看器的显示状态
	        viewerIndex: 0, // 当前查看的图片索引
            imgobj:{}
    };
  },
  mounted() {
  	this.examInfo = JSON.parse(sessionStorage.getItem('examInfo'))
	// this.modeltab()
  },
    components: {
      draggable,
    },
  methods: {
	  showViewer(index) {
	        // 显示查看器并跳转到指定图片
	        this.$viewer.view(index);
	      },
	      viewerInited(viewer) {
	        // 在 viewer 初始化后，可以通过 this.$viewer 访问 viewer 实例
	        this.$viewer = viewer;
	      },
	  onEnd(event) {
		const newIndex = event.newIndex;
			  // 更新拖拽元素的 page 值
		this.imgarray.forEach((image, index) => {
		        image.page = index + 1; // 更新 page 属性为新的索引值加 1
	   })
	   this.$emit('image-uploaded', this.imgarray);
		// //console.info(this.imgarray)
	  },
		  onMoveCallback(list){
			  // //console.info(this.imgarray)
			  // //console.info(list)
		  },
    handleFileChange(event) {
        const file = event.target.files[0];
        if (!file) return; // 如果没有文件，直接返回

        const formData = new FormData();
        formData.append('file', file);

        updatamodelcase(formData)
            .then(res => {
            if (res.code === 200) {
                // 初始化数组（如果未定义）
                this.imgarray = this.imgarray || [];
                
                // 构造对象并 push
                const imgobj = {
                    templateId: this.$route.query.templateId,
                    pageNo: this.page,
                    imageUrl: res.url
                };
                this.$emit('imageuploaded', this.imgarray);
            }
            })
            .catch(error => {
            console.error('上传失败:', error);
            });
        },
	delecttemplate(id){
		const index = this.imgarray.findIndex(item => item.id === id);
		// 如果找到了目标元素，则使用 splice 方法删除
		if (index !== -1) {
		  this.imgarray.splice(index, 1);
		}
	}
  },
};
</script>

<style scoped>
	.uploadlist{
		display: flex;
		align-items: center;
        margin:0 20px;
	}
.upload-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  position:relative;
  width:200px;
  height:140px;
  margin:22px 0;
}

.image-preview {
}

.image-preview img {
  width:200px;
 height:140px;
}
.uploadBoxinfo{
	box-sizing: border-box;
	width: 200px;
	height: 140px;
	background: #FFFFFF;
	border-radius: 10px;
	border: 1px dashed #D8E4F0;
	text-align: center;
	font-size:18px;
	color:#295CFF;
	cursor: pointer;
	position:absolute;
	z-index:1;
    line-height:140px;
}
.uploadBoxinfo i{
	display:block;
	color:#D8E4F0;
	padding:5px 0;
}
.fileIndex{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:2;
	cursor: pointer;
	opacity: 0;
}
.imgmove span{
	display: flex;
	align-items: center;
	margin:0 13px;
}
.imgmove span div{
	margin:0 13px;
}
.boxsetdelecte{
	position:relative;
}
.boxsetdelecte span{
	position:absolute;
	left:-24px;
	top:24px;
}
.buttonboxedit{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top:5px;
}
.buttonboxedit i{
	width: 52px;
	height: 24px;
	background: #295cff1a;
	border-radius: 12px;
	font-size: 16px;
	color: #295CFF;
	text-align: justify;
	line-height:24px;
	text-align: center;
	font-style:normal;
	cursor: pointer;
}
.buttonboxedit i:last-child{
	background: #ec555a1a;
	color:#EC555A;
	margin-left:15px;
}
.boxsetdelecte b{
	display: block;
	text-align: center;
	font-size:20px;
	padding-bottom:6px;
}
</style>